<template>
  <div class="aside">
    <el-menu 
      :default-active="currentPath" 
      background-color="#545c64" 
      text-color="#fff" 
      active-text-color="#ffd04b" 
      :collapse="isCollapse"
      router
    >
      <Submenu :data="menuList"/>
    </el-menu>
  </div>
</template>

<script>
import Submenu from './Submenu.vue';
import routes from '@/router/routes';
import { mapState } from 'vuex';
import { getMenuListByRoutes } from '@/libs/utils';
export default {
  components: {
    Submenu
  },
  props: {

  },
  data() {
    return {
      menuList: getMenuListByRoutes(routes)
    };
  },
  computed: {
    ...mapState({
      isCollapse: state => state.system.asideCollapse,
      currentPath: state => state.system.currentPath,
      labelList: state => state.system.labelList
    })
  },
  watch: {
    "$route": {
      handler (route) {
        this.$store.commit('system/SET_CURRENT_PATH', route.path);
        this.addLabel(route)
        if (!route?.meta?.noCache) {
          this.addCache(route)
        }
      },
      immediate: true
    },
    menuList: {
      handler (menuList) {
        if (!Array.isArray(menuList)) return
        let homeInfo = menuList.find(item => item.path === '/home')
        if (!homeInfo) return
        this.addLabel(homeInfo)
        if (!homeInfo?.meta?.noCache) {
          this.addCache(homeInfo)
        }

      },
      immediate: true
    }
  },
  methods: {
    addLabel (route) {
      let info = {
        path: route.path,
        name: route.name,
        meta: route?.meta,
        title: route?.meta?.title,
        hideInLabel: !!route?.meta?.hideInLabel
      }
      this.$store.commit('system/ADD_LABEL', info)
    },
    addCache (route) {
      this.$store.commit('system/ADD_CACHE', route.name)
    }
  }
};
</script>

<style scoped lang="scss">
.aside {
  height: 100%;
  overflow-x: hidden;
  background-color: #545c64;
  display: flex;
  flex: 0;
  .el-menu {
    border: none;
    &:not(.el-menu--collapse) {
      width: 200px;
    }
  }
}
</style>
